<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shop</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./dist/WOW-master/css/libs/animate.css">
    <link rel="stylesheet" href="./dist/reset.css">
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="box">
        <div id="topBar">
            <div class="logoImg wow fadeInDown">
                <a href="#">
                    <img src="./images/meirongLogo.png" alt="">
                </a>
            </div>
            <div class="inputBox wow fadeInDown">
                <img src="./images/search.png" alt="">
                <input type="text" placeholder="请输入关键词">
            </div>
            <div class="scanCode wow fadeInDown">
                <a href="#">
                    <img src="./images/saoma.png" alt="">
                </a>
            </div>
        </div>
        <div id="banner">
            <div class="carousel">
                <div class="item wow fadeInDown">
                    <a href="#">
                        <img src="./images/banner.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <div id="navList">
            <div class="cosmetics">
                <div class="item">
                    <div class="imgBox wow fadeInDown">
                        <img class="wow fadeInUp" src="./images/huazhuangpin-copy.png" alt="">
                    </div>
                    <p>肤用化妆品</p>
                </div>
                <div class="item">
                    <div class="imgBox wow fadeInDown">
                        <img class="wow fadeInUp" src="./images/huazhuangpin.png" alt="">
                    </div>
                    <p>美容化妆品</p>
                </div>
                <div class="item">
                    <div class="imgBox wow fadeInDown">
                        <img class="wow fadeInUp" src="./images/huazhuangpin1.png" alt="">
                    </div>
                    <p>发用化妆品</p>
                </div>
                <div class="item">
                    <div class="imgBox wow fadeInDown">
                        <img class="wow fadeInUp" src="./images/iconfonthuazhuangpin.png" alt="">
                    </div>
                    <p>其他化妆品</p>
                </div>
            </div>
            <div class="recommend">
                <div class="item">
                    <div class="titleBox">
                        <div class="wow fadeInDown imgBox">
                            <img class="wow fadeInUp" src="./images/jishiqi.png" alt="">
                        </div>
                        <div class="title">
                            <p class="wow fadeInDown">秒杀</p>
                            <p class="wow fadeInUp">限时抢购</p>
                        </div>
                    </div>
                    <div class="imgList">
                        <div class="imgBox wow fadeInDown">
                            <img class="fadeInUp" src="./images/kouhong1.png" alt="">
                        </div>
                        <div class="imgBox wow fadeInDown">
                            <img class="wow fadeInUp" src="./images/kouhon2.png" alt="">
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div class="titleBox">
                        <div class="wow fadeInDown imgBox">
                            <img class="wow fadeInUp" src="./images/shoucang.png" alt="">
                        </div>
                        <div class="title">
                            <p class="wow fadeInDown">新品推荐</p>
                            <p class="wow fadeInUp">挑剔的你</p>
                        </div>
                    </div>
                    <div class="imgList">
                        <div class="wow fadeInDown imgBox">
                            <img class="wow fadeInUp" src="./images/kouhon2.png" alt="">
                        </div>
                        <div class="wow fadeInDown imgBox">
                            <img class="wow fadeInUp" src="./images/kouhong3.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="itemList">
                <div class="item">
                    <div class="imgBox wow fadeInDown">
                        <img class="wow fadeInUp" src="./images/meirong.png" alt="">
                    </div>
                    <div class="titleBox">
                        <p class="title wow fadeInDown">免费试用</p>
                        <p class="text wow fadeInUp">大牌化妆品等你来体验</p>
                    </div>
                </div>
                <div class="item">
                    <div class="imgBox wow fadeInDown">
                        <img class="wow fadeInUp" src="./images/present.png" alt="">
                    </div>
                    <div class="titleBox">
                        <p class="title wow fadeInDown">签到有礼</p>
                        <p class="text wow fadeInUp">查看今日星座运势</p>
                    </div>
                </div>
                <div class="item">
                    <div class="imgBox wow fadeInDown">
                        <img class="wow fadeInUp" src="./images/zhuanti.png" alt="">
                    </div>
                    <div class="titleBox">
                        <p class="title wow fadeInDown">今日专题</p>
                        <p class="text wow fadeInUp">不能错过的变美秘籍</p>
                    </div>
                </div>
                <div class="item">
                    <div class="imgBox wow fadeInDown">
                        <img class="wow fadeInUp" src="./images/huazhuangpinx.png" alt="">
                    </div>
                    <div class="titleBox">
                        <p class="title wow fadeInDown">美妆视频</p>
                        <p class="text wow fadeInUp">手把手教你学化妆</p>
                    </div>
                </div>
            </div>
        </div>
        <div id="workList">
            <input checked type="radio" name="work" id="work1">
            <input type="radio" name="work" id="work2">
            <input type="radio" name="work" id="work3">
            <input type="radio" name="work" id="work4">
            <input type="radio" name="work" id="work5">
            <input type="radio" name="work" id="work6">
            <div class="labelList">
                <label class="wow fadeInDown" for="work1">全部</label>
                <label class="wow fadeInDown" for="work2">课程</label>
                <label class="wow fadeInDown" for="work3">视频</label>
                <label class="wow fadeInDown" for="work4">彩妆</label>
                <label class="wow fadeInDown" for="work5">护肤</label>
                <label class="wow fadeInDown" for="work6">附近</label>
            </div>
            <div class="itemList">
                <div class="item">
                    <div>
                        <div class="imgBox wow fadeInDown">
                            <img class="wow fadeInUp" src="./images/role1.png" alt="">
                        </div>
                        <p class="itemLabel wow fadeInDown">万圣节妆容 暗黑小萝莉 手残党福利 轻松容易学会</p>
                        <div class="userInfo">
                            <div class="wow fadeInDown headSculpture">
                                <img class="wow fadeInUp" src="./images/role1.png" alt="">
                            </div>
                            <span class="name wow fadeInDown">小千千库</span>
                            <span class="fanNub wow fadeInDown">粉丝784</span>
                            <div class="likeBox wow fadeInDown">
                                <img class="wow fadeInUp" src="./images/heart.png" alt="">
                                <span class="wow fadeInDown">&nbsp;199</span>
                            </div>
                        </div>
                    </div>    
                </div>
                <div class="item">
                    <div>
                        <div class="imgBox wow fadeInDown">
                            <img class="wow fadeInUp" src="./images/role2.png" alt="">
                        </div>
                        <p class="itemLabel wow fadeInDown">万圣节妆容 暗黑小萝莉 手残党福利 轻松容易学会</p>
                        <div class="userInfo">
                            <div class="headSculpture wow fadeInDown">
                                <img class="wow fadeInUp" src="./images/role2.png" alt="">
                            </div>
                            <span class="name wow fadeInDown">小千千库</span>
                            <span class="fanNub wow fadeInDown">粉丝784</span>
                            <div class="likeBox wow fadeInDown">
                                <img class="wow fadeInUp" src="./images/heart.png" alt="">
                                <span class="wow fadeInDown">&nbsp;199</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div id="tabBar">
            <input checked type="radio" name="tabBar" id="tabBar1">
            <label for="tabBar1" class="item">
                <span class="iconfont icon-home wow fadeInDown"></span>
                <p class="wow fadeInDown">首页</p>
            </label>
            <input type="radio" name="tabBar" id="tabBar2">
            <label for="tabBar2" class="item">
                <span class="iconfont icon-kouhong1 wow fadeInDown"></span>
                <p class="wow fadeInDown">美妆街</p>
            </label>
            <label class="item">
                <div class="wow fadeInDown">
                    <span class="iconfont icon-jiahao wow fadeInDown"></span>
                </div>
            </label>
            <input type="radio" name="tabBar" id="tabBar3">
            <label for="tabBar3" class="item">
                <span class="iconfont icon-shoppingcart wow fadeInDown"></span>
                <p class="wow fadeInDown">购物车</p>
            </label>
            <input type="radio" name="tabBar" id="tabBar4">
            <label for="tabBar4" class="item">
                <span class="iconfont icon-user wow fadeInDown"></span>
                <p class="wow fadeInDown">我的</p>
            </label>
        </div>
    </div>
    <script src="./dist/WOW-master/dist/wow.min.js"></script>
    <script>
        new WOW().init();
    </script>
</body>
</html>